<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>04_显示模式-行内元素</title>
        <style>
            span {
                /*  - （1）相邻行内元素在一行上，一行可以显示多个，直到一行排列不下，
                    才会换行。
                    - （2）高、宽直接设置是无效的。
                    - （3）默认宽度和高度就是它本身内容的宽度和高度。
                    - （4）行内元素只能容纳文本或其他行内元素。 
                */
                width: 200px;
                height: 200px;
                border: 1px solid black;

            }
        </style>
    </head>
    <body>

        <a href="">尚硅谷
            <a href="">下硅谷</a>
        </a>

        <span>尚硅谷</span><span>尚硅谷</span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span>
        <span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span><span>
            尚硅谷
        </span>
    </body>
</html>